import React, { useEffect, useState } from 'react';
import { MainMenu } from 'base/ctl/menu';
import { useStep } from 'use/step';
import { useScan } from 'use/scan';
import { Sbtn, get_path, Time } from 'base/ctl/base';
import { Title, ColorTitle } from 'base/ctl/title';
import { g_db, s_psn } from 'db/state';
import { Base } from '../base';
import { set_st, send_step } from 'base/api';
import { SettingView } from './setting';
import { StdView } from './std';
import { TraceView } from './trace';
import { load_setting, get_val } from './cmd';
import { loc, useHigh, obj_str } from 'sui';
import { DlgLog } from 'base/ctl/log';

const ClientView = ({ umd, wsn }) => {
    const [open_menu, openMenu] = useState(false);
    const [open_log, openLog] = useState(false);
    const [main, setMain] = useState();
    const [fin, setFin] = useState();
    const [high] = useHigh(300, 200)

    useScan(wsn, umd);

    const reset = () => {
        send_step(null, { fwidth: "", fdia: "" });

        set_st(umd, "ready");
        s_psn("");
        umd.set("psn", "");
    };

    useEffect(() => {
        load_setting(setMain);
        reset();

        umd.mset({
            "anum": g_db.anum(),
            "snum": g_db.snum(),
            "ng": g_db.ng(),
            "ok": g_db.ok(),
        });

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const hreturn = () => {
        load_setting(setMain);
        setFin(null);

        umd.mset({
            "anum": g_db.anum(),
            "snum": g_db.snum(),
        });

        reset();
    };

    if (fin === "setting") {
        return <SettingView wsn={wsn} hreturn={hreturn} high={high}/>;
    }

    if (fin === "std") {
        return <StdView wsn={wsn} hreturn={hreturn} high={high} umd={umd}/>;
    }

    if (fin === "table") {
        return <TraceView wsn={wsn} hreturn={hreturn} high={high}/>;
    }

    const getV = (k) => umd.get(k);

    const menu = [{
        label: loc("base_157"),
        name: "log",
        hcmd: () => openLog(true),
    }];

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between items-center">
                <div className="inline-flex">
                    <div className="ml-2 mr-4">
                        <MainMenu value={menu} open={open_menu} setOpen={openMenu}/>
                    </div>
                    <Title value={wsn} sub="宽度与外圆" width="w-56"/>
                    <Title value={obj_str(main, "tech")} sub="型号" width="w-56"/>
                    <Title value={getV("psn")} sub="单圈编号" width="w-64"/>
                </div>
                <div className="inline-flex mr-4">
                    <Sbtn cl="blue" label="重新测量" hcmd={() => reset()} className="mr-10" w="w-56"/>
                    <Sbtn cl="blue" label="标定" hcmd={() => setFin("std")}/>
                    <Sbtn cl="blue" label="设置" hcmd={() => setFin("setting")}/>
                    <Sbtn cl="blue" label="查询" hcmd={() => setFin("table")}/>
                </div>
            </div>
            <div className="inline-flex mt-4 items-center justify-center">
                <div className="inline-flex px-4 items-center text-2xl text-white mr-10">测量数量<span className="ml-4">{getV("anum")}</span></div>
                <div className="inline-flex px-4 items-center text-2xl text-white mr-10">合格数量<span className="ml-4">{getV("ok")}</span></div>
                <div className="inline-flex px-4 items-center text-2xl text-white mr-10">不合格数量<span className="ml-4">{getV("ng")}</span></div>
                <div className="inline-flex items-center ml-10">
                    <div className="text-2xl text-white mr-4">标定间隔</div>
                    <ColorTitle value={getV("snum")} cl="blue" width="w-10"/>
                    <ColorTitle value={obj_str(main, "num")} cl="teal" width="w-10"/>
                </div>
            </div>
            <div className="flex flex-row mb-2 mt-4" style={{ height: `${high}px`, width: "100%" }}>
                <div style={{ height: `${high}px` }} className="mr-2 overflow-y-auto w-1/2 text-white text-2xl border">
                    <div className="bg-blue-700 flex justify-between py-2 items-center">
                        <div className={ "inline-flex px-4 items-center"}>宽度</div>
                        <div className="flex flex-col">
                            <div className="inline-flex px-4 items-center">标定值 ( 微米 )<span className="ml-4">{obj_str(main, "out_w_std")}</span></div>
                            <div className="inline-flex px-4 items-center">校零值 ( 微米 )<span className="ml-4">{get_val(main, "out_w_zero")}</span></div>
                        </div>
                    </div>
                    <div className="table ml-8 mt-4 text-3xl">
                        <div className="table-row">
                            <div className="py-1 text-right table-cell">传感器数据 ( 微米 )</div>
                            <div className="px-6 py-1 table-cell">{getV("out_w_real")}</div>
                        </div>
                        <div className="table-row">
                            <div className="py-1 text-right table-cell">实时宽度值 ( 微米 )</div>
                            <div className="px-6 py-1 table-cell">{getV("out_w_calc")}</div>
                        </div>
                        <div className="table-row">
                            <div className="py-1 text-right table-cell">测量结果 ( 微米 )</div>
                            <div className="px-6 py-1 table-cell">{getV("out_w_val")}</div>
                        </div>
                    </div>
                </div>
                <div style={{ height: `${high}px` }} className="mx-2 overflow-y-auto w-1/2 text-white text-2xl border">
                    <div className="bg-teal-700 flex justify-between py-2 items-center">
                        <div className={ "inline-flex px-4 items-center"}>外圆</div>
                        <div className="flex flex-col">
                            <div className="inline-flex px-4 items-center">标定值 ( 微米 )<span className="ml-4">{obj_str(main, "out_dia_std")}</span></div>
                            <div className="inline-flex px-4 items-center">校零值 ( 微米 )<span className="ml-4">{get_val(main, "out_dia_zero")}</span></div>
                        </div>
                    </div>
                    <div className="table ml-8 mt-4 text-3xl">
                        <div className="table-row">
                            <div className="py-1 text-right table-cell">传感器数据 ( 微米 )</div>
                            <div className="px-6 py-1 table-cell">{getV("out_dia_real")}</div>
                        </div>
                        <div className="table-row">
                            <div className="py-1 text-right table-cell">实时外圆值 ( 微米 )</div>
                            <div className="px-6 py-1 table-cell">{getV("out_dia_calc")}</div>
                        </div>
                        <div className="table-row">
                            <div className="py-1 text-right table-cell">测量结果 ( 微米 )</div>
                            <div className="px-6 py-1 table-cell">{getV("out_dia_val")}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="inline-flex items-center justify-between">
                <div className="w-full mr-2 mt-2 border border-white rounded bg-white justify-between">
                    <div className="ml-2 font-bold text-xl text-red-600 h-12">{umd.get("err")}</div>
                </div>
                <div className="flex justify-center ml-2 w-32">
                    <Time up={true}/>
                </div>
            </div>
            <DlgLog open={open_log} setOpen={openLog}/>
        </div>
    );
};

const OutWdClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);
    const umd = useStep();

    if (g_db.is_stop_scan()) {
        g_db.start_scan();
    }

    return (
        <Base wsn={wsn} line={line}>
            <ClientView umd={umd} wsn={wsn}/>
        </Base>
    );
};

export {OutWdClient};
